<!--suppress CssRedundantUnit, JSUnresolvedVariable -->
<template>
  <div>
    <div style="margin-left: 40px;margin-top: 40px">
      <el-button @click="addHyperlink" size="small" type="success" class="el-icon-circle-plus" style="margin-bottom: 10px;margin-right:5px">添加超链接</el-button>
      <el-button type="danger" icon="el-icon-delete" @click="batchDelete" size="small" style="margin-left:5px;margin-right:5px">批量删除</el-button>
      <el-button @click="batchChangeHyperlinkState(1)" type="primary" size="small" class="el-icon-caret-top" style="margin-bottom: 10px;margin-right:5px">一键发布</el-button>
      <el-button @click="batchChangeHyperlinkState(0)" type="warning" size="small" class="el-icon-caret-bottom" style="margin-bottom: 10px;margin-right: 5px">一键下架</el-button>
      <el-input
        placeholder="通过链接名或链接搜索超链接"
        prefix-icon="el-icon-search"
        v-model="keywords" style="width:400px" size="small">
      </el-input>
      <el-button type="success" icon="el-icon-search" size="small" style="margin-left:3px" @click="searchClick">搜索
      </el-button>
    </div>

    <div style="margin-left: 30px;margin-top: 40px;">
      <el-table
        ref="multipleTable"
        :data="hyperlinkList"
        tooltip-effect="dark"
        style="width: 100%;overflow-x: hidden; overflow-y: hidden;"
        max-height="1200"
        @selection-change="handleSelectionChange" v-loading="listLoading">

        <el-table-column
          type="selection"
          width="35" align="left" v-if="hyperlinkList">
        </el-table-column>

        <el-table-column label="超链接名" width="230" align="left">
          <template slot-scope="scope"><span style="color: #409eff;cursor: pointer"  @click="clickHyperlink(scope.row.linkUrl)">{{ scope.row.title}}</span>
          </template>
        </el-table-column>
        <el-table-column label="超链接" width="230" align="left">
          <template slot-scope="scope"><span style="color: #409eff;cursor: pointer" @click="clickHyperlink(scope.row.linkUrl)">{{ scope.row.linkUrl}}</span>
          </template>
        </el-table-column>

        <el-table-column label="状态" width="100" align="center" sortable>
          <template slot-scope="scope">
            {{ scope.row.state === 0 ? '未发布' : '已发布' }}
            <br>
            <el-switch
              title="更改状态"
              v-model="scope.row.state.toString()"
              style="margin-top:15px"
              active-value="1"
              inactive-value="0"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="changeState(scope.row.id)"/>
          </template>
        </el-table-column>

        <el-table-column label="热度" prop="sort" width="100" align="center" sortable>
        </el-table-column>

        <el-table-column label="修改时间" prop="gmtModified" align="center" sortable>
        </el-table-column>

        <el-table-column label="创建时间" prop="gmtCreate" align="center" sortable>
        </el-table-column>

        <el-table-column label="操作" align="center" width="160" v-if="hyperlinkList.length>0">
          <template slot-scope="scope">

            <router-link :to="'/hyperlink/add/'+scope.row.id">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="small"
                title="编辑图片"></el-button>
            </router-link>

            <el-button
              type="danger"
              icon="el-icon-delete"
              size="small"
              @click="removeHyperlink(scope.row.id)"
              title="删除图片"></el-button>

          </template>
        </el-table-column>
      </el-table>
    </div>

    <span></span>
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />
  </div>
</template>

<script>
import hyperlinkApi from '@/api/hyperlink'

export default{

  data() {
    return {
      //选择条目
      selectItems: [],
      selectIds: [],
      //搜索关键字
      keywords: "",
      //超链接列表
      hyperlinkList: [],
      page: 1, // 当前页
      limit: 10000, // 每页记录数
      total: 0
    }
  },

  created() {
    this.getList()
  },

  methods: {

    //点击超链接
    clickHyperlink(linkUrl) {
      window.open(linkUrl)
    },

    //改变状态
    changeState(id) {
      this.$confirm('确定更改该超链接状态?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 删除成功
        hyperlinkApi.changeState(id)
          .then(response => {
            // 提示信息
            this.$message({
              type: 'success',
              message: '超链接状态更改成功!'
            })
            // 刷新并回到当前页
            this.getList()
          })
      })
    },

    //单个删除
    removeHyperlink(id) {
      this.$confirm('确定删除该超链接?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        hyperlinkApi.removeHyperlinkById(id)
          .then(response => {
            this.$message({
              message: "删除成功",
              type: "success"
            })
          })
      })
    },

    //批量删除
    batchDelete() {
      if (this.selectItems.length===0) {
        this.$message({
          message: "请选择至少一个超链接删除",
          type: "warning"
        })
        return
      }
      this.$confirm('确定批量删除超链接?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        for (let i = 0; i <this.selectItems.length; i++) {
          this.selectIds.push(this.selectItems[i].id)
        }
        hyperlinkApi.batchDelete(this.selectIds)
          .then(response => {
            this.$message({
              message: "删除成功",
              type: "success"
            })
        })
      })

    },

    // 超链接列表
    getList(page = 1) {
      this.page = page // 分页修改参数
      hyperlinkApi.getPageHyperlink(this.page, this.limit)
        .then(response => {

          this.hyperlinkList = response.data.items
          this.total = response.data.total

          this.$notify({
            message: "查询到" + this.hyperlinkList.length + "个超链接",
            type: "success"
          })

          console.log("============获取超链接列表============")
          console.log(this.hyperlinkList)
          console.log(this.total)
        })
    },

    //关键字搜索
    searchClick(){
      console.log(this.keywords)
      if (this.keywords==="") {
        hyperlinkApi.searchHyperlink(null)
          .then(response => {
            this.hyperlinkList = response.data.searchResult
          })
      } else {
        hyperlinkApi.searchHyperlink(this.keywords)
          .then(response => {
            this.hyperlinkList = response.data.searchResult
          })
      }
    },

    //跳转添加超链接
    addHyperlink() {
      this.$router.push({ path: '/hyperlink/add' })
    },

    //多选
    handleSelectionChange(val) {
      this.selectItems = val
    },

    //一键发布
    batchChangeHyperlinkState(state) {
      let upHyperlinkNum = 0
      let downHyperlinkNum = 0
      for (let i = 0; i < this.hyperlinkList.length; i++) {
        if (this.hyperlinkList[i].state===1) {
          upHyperlinkNum++
        } else {
          downHyperlinkNum++
        }
      }
      if (state===1) {
        if(downHyperlinkNum===0) {
          this.$message({
            message: "当前无未上架超链接！",
            type: "warning"
          })
          return
        }
        this.$confirm('当前有'+downHyperlinkNum+'个超链接未上架，是否一键上架这'+downHyperlinkNum+'个超链接？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          hyperlinkApi.batchChangeHyperlinkState(state)
            .then(response => {
              this.$message({
                message: downHyperlinkNum+"个超链接上架成功",
                type: "success"
              })
              this.getList()
            })
        })
      } else {
        if(upHyperlinkNum===0) {
          this.$message({
            message: "当前无已上架超链接！",
            type: "warning"
          })
          return
        }
        this.$confirm('当前有'+upHyperlinkNum+'个超链接已上架，是否一键下架这'+upHyperlinkNum+'个超链接？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          hyperlinkApi.batchChangeHyperlinkState(state)
            .then(response => {
              this.$message({
                message: upHyperlinkNum+"个超链接下架成功",
                type: "success"
              })
              this.getList()
            })
        })
      }
    }
  },
  props: ['state', 'showEdit', 'showDelete', 'activeName', 'showRestore']
}
</script>

<style type="text/css">
.blog_table_footer {
  display: flex;
  box-sizing: content-box;
  padding-top: 10px;
  padding-bottom: 0px;
  margin-bottom: 0px;
  justify-content: space-between;
}
</style>
